<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">遗失详情</block>
		</cu-custom>
		<view>
			<!-- 标题 -->
			<view class="margin text-center" style="font-size: 40rpx;">
				<text>{{loseFrom.loseTitle}}</text>
			</view>
			<!-- 发布时间 -->
			<view class="margin" style="color: #6d6d6d;font-size: 25rpx;">
				<uni-row>
					<uni-col :span="16" style="text-align: right;">
						<text>更新时间：{{loseFrom.createTime}}</text>
					</uni-col>
					<uni-col :span="8" style="text-align: center;">
						<uni-icons type="eye-filled" size="12" color="#777" />
						<text>浏览：{{readView + 1}}</text>
					</uni-col>
				</uni-row>
			</view>
			<!-- 宠物信息 -->
			<view class="margin petInfo">
				<view class="margin">
					<uni-row>
						<uni-col :span="8">
							<text>姓名：{{loseFrom.losePetNick}}</text>
						</uni-col>
						<uni-col :span="8">
							<text>性别：{{(loseFrom.losePetSex === 'ZZ')?'男孩':(loseFrom.losePetSex === 'ZW')?'女孩':'未知'}}</text>
						</uni-col>
						<uni-col :span="8">
							<text>年龄：{{loseFrom.losePetAge}}</text>
						</uni-col>
					</uni-row>
				</view>
				<view class="margin">
					<uni-row>
						<uni-col :span="8">
							<text>类型：{{loseFrom.petStar.starName}}</text>
						</uni-col>
						<uni-col :span="8">
							<text>种类：{{loseFrom.petType.typeName}}</text>
						</uni-col>
						<uni-col :span="8">

						</uni-col>
					</uni-row>
				</view>
			</view>

			<!-- 宠物照片 -->
			<view class="margin">
				<view class="petLoes">
					<text class="margin">宠物照片</text>
				</view>
				<view class="margin">
					<uni-grid :column="3" :highlight="true" :show-border="false">
						<uni-grid-item v-for="(item, index) in losePetImages" :index="index" :key="index">
							<view class="margin-xs" style="width: 200rpx;height: 200rpx;">
								<image mode="scaleToFill" style="height: 200rpx;width: 200rpx;"
									:src="baseUrl+losePetImages[index]" />
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>

			<!-- 走失区域 -->
			<view class="margin">
				<view class="petLoes">
					<text class="margin">走失区域</text>
				</view>
				<view class="margin">
					<text>{{loseFrom.loseArea}}</text>
				</view>
			</view>
			<!-- 发布者信息 -->
			<view class="margin">
				<view class="petLoes">
					<text class="margin">发布者信息</text>
				</view>
				<view class="margin">
					<view class="pushUserInfo">
						<view class="margin">
							<uni-row>
								<uni-col :span="8">
									<image :src="baseUrl+loseFrom.loseUserPicture"
										style="height: 180rpx;width: 180rpx;border-radius: 50%;"></image>
								</uni-col>
								<uni-col :span="16">
									<view class="margin-left-xl">
										<text>{{loseFrom.losePetUser}}</text>
										<uni-tag class="margin-xs" :inverted="true" text="未实名认证" type="warning"
											size="mini"></uni-tag>
										<view class="margin-top-lg">
											<uni-row :gutter="5">
												<uni-col :span="6">
													<uni-icons type="phone-filled" style="color: #00aaff;"
														size="20"></uni-icons>
													<!-- <text>手机</text> -->
												</uni-col>
												<uni-col :span="6">
													<uni-icons type="weixin" style="color: #00aa00;"
														size="20"></uni-icons>
													<!-- <text>微信</text> -->
												</uni-col>
												<uni-col :span="6">
													<uni-icons type="qq" style="color: #aa0000;" size="20"></uni-icons>
													<!-- <text>QQ</text> -->
												</uni-col>
												<uni-col :span="6">
													<uni-icons type="email-filled" style="color: #42c8c8;"
														size="20"></uni-icons>
													<!-- <text>QQ</text> -->
												</uni-col>
											</uni-row>
										</view>
									</view>
								</uni-col>
							</uni-row>
						</view>

					</view>
				</view>
			</view>
			<!-- 详情 -->
			<view class="margin">
				<view class="petLoes">
					<text class="margin">丢失经过</text>
				</view>
				<view class="margin">
					<text>{{loseFrom.losePetCourse}}</text>
				</view>
			</view>

			<view class="margin">
				<view class="petLoes">
					<text class="margin">最新消息</text>
				</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 800rpx;" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view class="margin" v-for="(item,index) in 10" :key="index">
						<uni-row>
							<uni-col :span="4">
								<view style="text-align: center;">
									<image src="../../../static/uni.png" style="height: 60rpx;width: 60rpx;">
									</image>
								</view>
							</uni-col>
							<uni-col :span="20">
								<view class="margin-xs" style="text-align: left;">
									<view class="text-gray">我在草丛里看到了它我在草丛里看到了它我在草丛里看到了它我在草丛里看到了它我在草丛里看到了它我在草丛里看到了它
									</view>
									<text class="text-gray" style="font-size: 20rpx;">发表于:2024-08-01 20:00:00</text>
								</view>
							</uni-col>
						</uni-row>

					</view>
				</scroll-view>
			</view>
			<!-- 占位 -->
			<view style="height: 200rpx;"></view>

			<!-- 底部输入框 -->
			<view class="margin">
				<view class="bottomNav margin">
					<uni-row :gutter="20">
						<uni-col :span="18" style="text-align: right;">
							<uni-easyinput style="width: 100%;" prefixIcon="paperplane" placeholder="留下你的线索!"
								@iconClick="iconClick"></uni-easyinput>
						</uni-col>
						<uni-col :span="6" style="text-align: center;">
							<button style="background-color: #0081ff;height: 65rpx;line-height: 65rpx;color: white;"
								size="mini">发送</button>
						</uni-col>
					</uni-row>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		getLose
	} from '@/api/pets/lose.js'
	import {
		listViews,
		updateViews
	} from '@/api/pets/views.js'
	import config from "@/config.js";


	export default {
		data() {
			return {
				baseUrl: config.baseUrl,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				losePetImages: [],
				loseFrom: {
					loseId: null,
					loseTitle: null,
					createTime: null,
					losePetNick: null,
					losePetSex: null,
					losePetAge: null,
					petStar: {
						starName: null,
					},
					petType: {
						typeName: null,
					},
					loseArea: null,
					loseUserPicture: null,
					losePetUser: null,
					losePhone: null,
					loseQq: null,
					loseWechat: null,
					loseEmail: null,
					losePetCourse: null,
				},
				//浏览量
				readView: 100,
				//浏览量id
				readViewId: null,
				queryLoseViews: {
					pageNum: 1,
					pageSize: 10,
					loseId: null,
					adoptId: null,
				}
			}
		},
		onLoad: function(options) {
			this.getLosePetInfo(options.id);
			this.queryLoseViews.loseId = options.id
			listViews(this.queryLoseViews).then(res => {
				this.readView = res.rows[0].loseViewSum
				this.readViewId = res.rows[0].viewId;
				this.addReadViews();
			})
		},
		created() {},
		methods: {
			// 获取宠物丢失相信信息
			getLosePetInfo(loseId) {
				getLose(loseId).then(res => {
					this.loseFrom = res.data;
					this.losePetImages = res.data.loseImages.split(',')

				})
			},
			// 添加宠物丢失浏览量
			addReadViews() {
				var form = {
					viewId: null,
					loseId: null,
					loseViewSum: null,
					adoptId: null,
					adpotViewSum: null
				};
				form.viewId = this.readViewId;
				form.loseViewSum = this.readView + 1;
				updateViews(form).then(res => {

				})
			},

			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style>
	.petInfo {
		height: 200rpx;
		/* background-color: aquamarine; */
		border: 2px solid #0081ff;
	}

	.petLoes {
		border-left: 3px solid #0081ff;
	}

	.pushUserInfo {
		height: 250rpx;
		border: 1px solid #b9b9b9;
		border-radius: 20rpx;
		box-shadow: 1px 1px 5px 5px rgba(102, 102, 102, 0.2);
	}

	.bottomNav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		/* width: 100%; */
		height: 100rpx;
		/* border-top: 1px solid #b9b9b9; */
		/* box-shadow: 25px 10px 25px rgba(102, 102, 102, 0.8); */
		/* background-color: #e6e6e6; */
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.responsive-image {
		width: 100%;
		/* 或指定最大宽度，如 max-width: 100%; */
		height: auto;
		/* 保持图片宽高比 */
	}
</style>